import React, { Component } from "react"
import InfoTable from "../common/sourceTable"
import { Card, Button, Popconfirm, message, Spin } from "antd"
import { DeleteFilled } from '@ant-design/icons'
import { getLogInfo, deleteLogInfo, deleteLogInfoAll } from '@net/log/index'
import HeaderSearch from '../common/headerSearch'
import Power from '@comm/power'
import "../../index.scss"

interface IPorps { }
interface IStates {
    data: any[]
    loading: boolean,
    popVisible: string,
    delId: number,
    page: number,
    pageSize: number,
    total: number,
    delKeyList: number[],
    spin:boolean,
    search:any
}

export default class Log extends Component<IPorps, IStates> {
    // 表格设置
    private column = [
        {
            key: "name",
            dataIndex: "name",
            title: "操作人",
            align: "center"
        },
        {
            key: "doName",
            dataIndex: "doName",
            title: "操作账户",
            align: "center"
        },
        {
            key: "role",
            dataIndex: "role",
            title: "角色",
            align: "center"
        },
        {
            key: "doInfo",
            dataIndex: "doInfo",
            title: "操作信息",
            align: "center"
        },
        {
            key: "doTime",
            dataIndex: "doTime",
            title: "操作时间",
            align: "center"
        },
        {
            key: "do",
            dataIndex: "do",
            title: "操作",
            align: "center",
            render: (text: any, record: any) => {
                const item = record
                return (
                    <div className="do">
                        <Power authKey="log:info:remove">
                            <Popconfirm title="您确定要删除吗？" okText="是" cancelText="否"
                                onConfirm={this.delete} visible={item.key === this.state.popVisible}
                                onCancel={() => { this.setState({ popVisible: "-1" }) }}>
                                <Button size="small" danger icon={<DeleteFilled />} onClick={() => { this.openPopDia(item) }} />
                            </Popconfirm>
                        </Power>
                    </div>
                )
            }
        }
    ]
    private searchCol = [
        {
            type: 'input',
            name:"mode",
            label:"操作类型",
            component: {
                placeholder: "请输入操作类型",
            },
            style: { borderRadius: "5px" }
        }
    ]
    constructor(props: IPorps) {
        super(props)
        this.state = {
            data: [],
            loading: true,
            popVisible: "-1",
            delId: 0,
            page: 1,
            pageSize: 5,
            total: 0,
            delKeyList: [],
            spin:false,
            search:null
        }
    }
    public componentDidMount() {
        this.fetchData(this.state.page, this.state.pageSize)
    }
    // 获取数据
    public fetchData = async (page: number, pageSize: number) => {
        const res = await getLogInfo({ page, pageSize },this.state.search)
        res.data.data.map((item: any) => {
            return item.key = item.Id
        })
        this.setState({ loading: false, data: res.data.data, total: res.data.total })
    }
    public search = (item:any) => {
        if (item.mode === undefined) {
            this.setState({search:null},() => {
                this.fetchData(this.state.page, this.state.pageSize)
            })
            return
        }
        this.setState({search:item},async() => {
            const res = await getLogInfo({ page: 1, pageSize: 5 },this.state.search)
        const { status, msg, data, total } = res.data
        if (status === 203) {
            message.error({ content: msg, style: { marginTop: "20%" } })
        } else {
            message.success({ content: msg, style: { marginTop: "20%" } })
            this.setState({ data: data,total: total })
        }
        })
    }
    // 页码切换监听事件
    public pageChange = (page: number, pageSize?: number) => {
        if (pageSize) {
            this.setState({ page, pageSize }, () => {
                this.fetchData(page, pageSize)
            })
        }
    }
    public openPopDia = (item: any) => {
        this.setState({ popVisible: item.key, delId: item.Id })
    }
    public delete = async () => {
        const res = await deleteLogInfo(this.state.delId)
        const { status, msg } = res.data
        if (status === 203) {
            message.error({ content: msg, style: { marginTop: "20%" } })
        } else if (status === 200) {
            message.success({ content: msg, style: { marginTop: "20%" } })
            this.setState({ popVisible: "-1" })
            this.fetchData(this.state.page, this.state.pageSize)
        }
    }
    public getSelectRow = (items:number[]) => {
        this.setState({delKeyList:items})
    }
    // 批量删除
    public delBatch = () => {
        if(this.state.delKeyList.length === 0){
            message.warn({ content: "至少选择一项", style: { marginTop: "20%" } })
        }else {
            this.setState({spin:true},() => {
                deleteLogInfoAll(this.state.delKeyList).then((res: any) => {
                    const { status, msg } = res.data
                    if (status === 203) {
                        message.error({ content: msg, style: { marginTop: "20%" } })
                        this.setState({delKeyList:[] ,spin:false})
                    } else if (status === 200) {
                        message.success({ content: msg, style: { marginTop: "20%" } })
                        this.setState({delKeyList:[] ,spin:false})
                        this.fetchData(this.state.page, this.state.pageSize)
                    }
                })
            })
        }
    }
    public render() {
        const { total,spin } = this.state
        return (
            <div className="source">
                <Card className="card">
                    <HeaderSearch
                        authKey="log:info:list"
                        column={this.searchCol}
                        search={this.search}></HeaderSearch>
                    <div>
                        <Power authKey="log:info:delBatch">
                            <Button type="primary" onClick={() => this.delBatch()}>批量删除</Button>
                        </Power>
                    </div>
                    <InfoTable
                        columns={this.column}
                        loading={this.state.loading}
                        dataSource={this.state.data}
                        pageChange={this.pageChange}
                        total={total}
                        selectRow={this.getSelectRow}>
                    </InfoTable>
                </Card>
                <Spin size="large" spinning={spin} style={{position:"absolute",top:"50%",left:"50%"}}/>
            </div>
        )
    }
}